<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar class="bac" title="个人中心" left-arrow @click-left="$router.back()" />
    <!-- 头像 -->
    <div v-if="userInfo" class="imgInfo">
      <van-image
        round
        width="5.7rem"
        height="5.7rem"
        src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg"
      />
      <!-- 用户名 -->
      <p class="nickname">{{ userInfo.nickname }}</p>
      <van-button @click="logout" type="danger">退出登录</van-button>
    </div>
    <!-- 未登录让他去登录 -->
    <div class="imgInfo" v-else>
      <van-image
        round
        width="5.7rem"
        height="5.7rem"
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1666256797,972082711&fm=26&gp=0.jpg"
      />
      <!-- 用户名 -->
      <p class="nickname">游客</p>
      <van-button @click="$router.push('/login')" type="warning">登录</van-button>
    </div>
    <div>
      <van-cell title="地址管理" icon="location-o" />
      <van-cell title="我的钱包" icon="gold-coin-o" />
      <van-cell title="我的二维码" icon="qr" />
      <van-cell title="我的小伙伴" icon="friends-o" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    //把登录信息从本地存储中取出来
    this.userInfo = sessionStorage.getItem("userInfo")
      ? JSON.parse(sessionStorage.getItem("userInfo"))
      : false;
      // console.log(this.userInfo);
  },
  methods: {
      //封装一个退出登录事件
      logout(){
          //清空你的缓存并强制跳转到登录
          sessionStorage.removeItem('userInfo')
          this.$router.push('/login')
      }
  },
};
</script>

<style lang="" scoped>
.bac {
  background: #ff6040;
}

.imgInfo {
  text-align: center;
}
.nickname {
  font-size: 24px;
  color: #333;
}
</style>
